import React, { Suspense } from 'react';
import NProgress from 'nprogress';

function SuspenseLoader({ children }: any) {
  React.useEffect(() => {
    NProgress.start();

    return () => {
      NProgress.done();
    };
  }, [] as any);

  return (
    <div
      style={{
        position: 'fixed',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        left: 0,
        top: 0,
        width: '100%',
        height: '100%'
      }}
    >
      { children }
    </div>
  );
}

export const Loader = (Component: any, placeholder: any = null) => {
  return (props: any) => {
    // console.log('l o a d e r')
    return (
      <Suspense fallback={<SuspenseLoader >{placeholder}</SuspenseLoader>}>
        <Component {...props} />
      </Suspense>
    )
  }
};
